<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>订单详情</title>
  <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/orderManage/xorderManage.css">
  <style> 
    .pay-info {
      background: #eee;
      position: fixed;
      bottom: 0;
      width: 100%;
      box-shadow: 0 -2px 5px #E0DFDF;
    }
    .pay-info p {
      padding-right: 80px; 
    }
    .pay-info button {
      position: absolute;
      top: 0;
      right: 0;
      padding: 0;
      width: 80px;
      height: 100%;
      border: none;
      outline: none;
      color: #fff;
      font-size: 14px;
      background: linear-gradient(to right, #EC9F24, #EE4613)
    }
    .pay-info button:active {
      background: linear-gradient(to right, #F7A831, #EE1313)
    }
    .goods-foot label {font-weight: 500}
  </style>
</head>

<body>
  <div class="container">
    <!-- 收货信息 -->
    <h5 class="text-center info-title">收货信息</h5>
    <div class="panel panel-default">
      <div class="panel-body">
        <p><strong><span>曾先生</span>&nbsp;&nbsp;&nbsp;<span>14141414141</span></strong></p>
        <p><strong>我假装是一个很长很长的地址，真是不可思议</strong></p>
      </div>
    </div>
    <!-- 商品信息 -->
    <h5 class="text-center info-title">商品信息</h5>
    <ul class="list-group my-list-group">
      <li class="list-group-item">
        <a href="#" class="goods-title">
          <span>06-12-12</span>
          <span class="pull-right">订单编号222222222</span>
        </a>
        <a href="##">
          <div class="good-content">
            <div class="goods-img">
              <img src="./img/logo/goods-ex.png">
            </div>
            <div class="goods-desc">
              <p class="text-12px">《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑</p>
            </div>
            <div class="goods-status text-12px">
              <div class="goods-status-img"><span>待付款</span></div>
            </div>
          </div>
        </a>
        <!-- 商品数量 -->
        <div class="goods-foot row">
          <label class="col-xs-4 text-left">商品数量</label>
          <label class="col-xs-8 text-right">x1</label>
        </div>
        <!-- 配送方式 -->
        <div class="goods-foot row">
          <label class="col-xs-4 text-left">配送方式</label>
          <label class="col-xs-8 text-right">快递 免邮</label>
          <!-- <div class="col-xs-offset-3 col-xs-5">
            <select class="form-control">
              <option value="">快递 免邮</option>
              <option value="">快递 平邮</option>
            </select>
          </div> -->
        </div>
        <!-- 邮费： 如果是免邮则不显示 -->
        <div class="goods-foot row">
          <label class="col-xs-4 text-left">邮费</label>
          <label class="col-xs-8 text-right">¥ 10.00</label>
        </div>
        <!-- 配送时间：可选项 -->
        <div class="goods-foot row">
          <label class="col-xs-4 text-left">配送时间</label>
          <label class="col-xs-8 text-right">18：00前付款,预计10月2日送达</label>
        </div>
        <!-- 运费险：可选项 -->
        <div class="goods-foot row">
          <label class="col-xs-4 text-left">运费险</label>
          <label class="col-xs-8 text-right">卖家送</label>
        </div>
      </li>
    </ul>
  </div>
  <!-- 提交订单按钮，固定至底部 -->
  <div class="pay-info">
    <div class="goods-foot text-right">
      <p class="text-12px">
        合计：¥<strong><span class="text-14px">24.00</span></strong>
        <button type="button"  data-toggle="modal" data-target="#payMoney">提交订单</button>
      </p>  
    </div>
  </div>

  <!-- 支付模态框 -->
  <div class="modal fade" id="payMoney" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg container" style="position: fixed; left: 0; right: 0; bottom: 10px; background: #fff; border-radius: 5px;">
      <ul class="list-group" style="margin: 0;">
        <!-- 支付方式 -->
        <li class="list-group-item row">
          <div class="col-xs-4">
            <h5>支付方式</h5>
          </div>
          <div class="col-xs-8">
            <select class="form-control">
              <option value="weixin">微信支付</option>
              <option value="underline">线下支付</option>
            </select>
          </div>
        </li>
        <!-- 支付金额 -->
        <li class="list-group-item row">
          <div class="col-xs-4">
            <h5>支付金额</h5>
          </div>
          <div class="col-xs-8">
            <h5 class="text-danger text-16px"><strong>¥6060</strong></h5>
          </div>
        </li>
        <!-- 确认按钮 -->
        <li class="list-group-item row">
          <div class="col-xs-offset-1 col-xs-5">
            <!-- 点击取消支付后加入到待支付项 -->
            <a class="btn btn-default btn-block" href="#">取消支付</a>
          </div>
          <div class="col-xs-5">
            <!-- 点击确认支付后加入到待发货项 -->
            <a class="btn btn-danger btn-block" href="#">确认支付</a>
          </div>
        </li>
      </ul> 
    </div>
  </div>
  <script src="./lib/jquery/jquery.min.js"></script>
  <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>